@extends('layouts.layouts')
@section('title')
    <title>后台首页</title>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
   
@endsection
@section('content')
 <script src="/js/upload.js" type="text/javascript"></script>
    <div class="content">
        <div class="header">

            <h1 class="page-title">pt后台管理</h1>
            <ul class="breadcrumb">
                <li>标签管理</li>
                <li class="active">标签列表</li>
                 <!-- <li class="active">标签列表</li> -->
            </ul>

        </div>
        <div class="main-content">

            <div class="btn-toolbar list-toolbar">
                <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" ><i class="fa fa-plus"></i> 标签</button> -->
                <!-- <button >Import</button> -->
                <!-- <button class="btn btn-default" data-toggle="modal" data-target="#myModal">Export</button>
                <div class="btn-group">
                </div> -->
                <form class="form-inline" action="" method="get">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" ><i class="fa fa-plus"></i> 标签</button>
                      <div class="form-group">
                        <input type="text" class="form-control" name="keyword" placeholder="标签编号或标题">
                      </div>
                      <div class="form-group">
                        <select class="form-control" name="state">
                          <option value="">状态</option>
                          <option value="1">已上线</option>
                          <option value="0">已下线</option>
                        </select>
                      </div>
                      <!-- <div class="form-group">
                        <input type="email" class="form-control" name="begin_time"  placeholder="请选择开始时间">
                      </div>
                      <div class="form-group">
                        <input type="email" class="form-control" name="end_time"  placeholder="请选择结束时间">
                      </div> -->
                      <button type="submit" class="btn btn-default">筛选</button>
                </form>
            </div>

            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading no-collapse">标签列表<!-- <span class="label label-warning">+10</span> --></div>
                        <table class="table table-bordered table-striped">
                          <thead>
                            <tr>
                              <th>编号</th>
                              <th>标签标题</th>
                              <!-- <th>标签图片</th> -->
                                <th>创建时间</th>
                                <th>相关文章数量</th>
                                <!-- <th>类别区分</th> -->
                                <th>状态</th>
                                <th>最后操作</th>
                                <th>操作</th>
                            </tr>
                          </thead>
                          <tbody>
                         
                            @foreach($list as $item)
                            <tr>
                              <td>{{$item['id']}}</td>
                              <td>{{$item['title']}}</td>
                              <!-- <td><img class="pimg" src="{{env('IMG_URL')}}{{$item['cover_url']}}" width='60' /></td> -->
                              <td>{{$item['created_at']}}</td>
                              <td>{{sum_tag_course($item['id'])}}</td>
                              <!-- <td>{{App\Contant\CommonType::trans($item['type'])}}</td> -->
                              <td>
                                @if($item['state']==1)
                                <span class="label label-success">已上线</span>
                                @else
                                <span class="label label-danger">已下线</span>
                                @endif 
                              </td>
                              <td>@if(isset($item->users->name)) {{$item->users->name}} @endif</td>
                              <td>
                                <!-- <a class="alert_form_edit" data-id="{{$item['id']}}" data-title="{{$item['title']}}" data-type="{{$item['type']}}" data-state="{{$item['state']}}" href="javascript:;" data-toggle="modal" data-target="#editModal">编辑</a> -->
                                <a href="/tags/edittag/{{$item['id']}}">编辑</a>
                                @if($item['state']==1)
                                <a href='/tags/uptagstate/{{$item['id']}}/0'>下线</a>
                                @else
                                 <a href='/tags/uptagstate/{{$item['id']}}/1'>上线</a>
                                @endif 
                                <a href='/tags/deltag/{{$item['id']}}'>删除</a>
                              </td>
                            </tr>
                            @endforeach
                        
                          </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {{$list->appends(['state'=>$state,'keyword'=>$keyword])->render()}}
            <div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="myModalLabel">Delete Confirmation</h3>
                        </div>
                        <div class="modal-body">
                            <p class="error-text"><i class="fa fa-warning modal-icon"></i>Are you sure you want to delete the user?<br>This cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
                            <button class="btn btn-danger" data-dismiss="modal">Delete</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- 新增标签模态框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <form action="/tags/addtag" onkeydown="if(event.keyCode==13)return false;" method="post" id="tag_form_add">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">新增标签</h4>
          </div>
          
              <div class="modal-body">
                 <div class="form-group">
                      <label for="recipient-name" class="control-label">seo标题:</label>
                      <input type="text" class="form-control" id="recipient-name" name="seo_title" placeholder="请填写seo标题" />
                  </div>
                  <div class="form-group">
                      <label for="recipient-name" class="control-label">seo描述:</label>
                      <input type="text" class="form-control" id="recipient-name" name="seo_description" placeholder="请填写seo描述" />
                  </div>
                  <div class="form-group js-reset-image">
                    <a href="javascript:;" class="file">上传封面图
                        <input type="file" class="upload_img cover" name="coverUrl" placeholder="封面图">
                    </a>
                    <img src="" style="width:50%;margin-left: 10px;" id="banner_url" />
                    <span id="error"></span>
                  </div>

                  <div class="form-group">
                    <label for="recipient-name" class="control-label">标签名称:</label>
                    <input type="text" class="form-control" id="recipient-name" name="title" placeholder="请填写标签标题" />
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">标签类别:</label>
                      <select class="form-control" name="type">
                          <option value="ARTICLE">{{App\Contant\CommonType::ARTICLE}}(默认)</option>
                          <option value="COURSE">{{App\Contant\CommonType::COURSE}}</option>
                          <option value="CIRCLE">{{App\Contant\CommonType::CIRCLE}}</option>
                        </select>
                    </div>     
                  <div class="form-group">
                    <label for="message-text" class="control-label">状态:</label>
                    <label class="checkbox-inline">
                      <input type="radio" id="inlineCheckbox1" value="1" name="state" checked="true"> 上线
                    </label>
                    <label class="checkbox-inline">
                      <input type="radio" id="inlineCheckbox2" value="0" name="state"> 禁用
                    </label>
                  </div>
              </div>
          
          <div class="modal-footer">
            {{csrf_field()}}
            <input type="hidden" name="cover_url" id="input_banner_url" />
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="submit_form_add">提交</button>
          </div>
        </div>
         </form>
      </div>
    </div>
    <!-- 编辑标签模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <form action="/tags/addtag" method="post" id="tag_form_edit">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">编辑标签</h4>
          </div>
          
              <div class="modal-body">
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">标签名称:</label>
                    <input type="text" class="form-control" id="recipient-name" name="title" placeholder="请填写标签标题" />
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">标签类别:</label>
                      <select class="form-control" name="type">
                          <option value="course">学院课程</option>
                          <option value="article">专题文章</option>
                          <option value="circle">圈子</option>
                        </select>
                    </div>     
                  <div class="form-group">
                    <label for="message-text" class="control-label">状态:</label>
                    <label class="checkbox-inline">
                      <input type="radio" id="inlineCheckbox1" value="1" name="state" checked="true"> 上线
                    </label>
                    <label class="checkbox-inline">
                      <input type="radio" id="inlineCheckbox2" value="0" name="state"> 禁用
                    </label>
                  </div>
              </div>
          
          <div class="modal-footer">
            {{csrf_field()}}

            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="submit_form_edit">提交</button>
          </div>
        </div>
         </form>
      </div>
    </div>
    <script type="text/javascript">
        var imgUrl = '{{env('IMG_URL')}}'; 
        $(document).ready(function(){
            //提交信息
            $("#submit_form_add").click(function(){
                var data = $("#tag_form_add").serialize();
                data = decodeURIComponent(data,true);
                $.ajax({
                    type:"POST",
                    url:"/tags/addtag",
                    data:data,
                    dataType:'json',
                    success:function(result){
                        console.log(result);
                        if(result.code==1){
                            location.reload();
                        }else{
                            alert(result.msg);
                        }
                    }
                });
            });

            $(".alert_form_edit-").click(function(){
                var id = $(this).attr("data-id");
                var title = $(this).attr("data-title");
                var type  = $(this).attr("data-type");
                var state = $(this).attr("data-state");
                alert(id);
                alert(title);
                alert(type);
                alert(state);
            });

            $("#submit_form_edit-").click(function(){
                var data1 = $("#tag_form_edit").serialize();
                data1 = decodeURIComponent(data1,true);
                $.ajax({
                    type:"POST",
                    url:"/tags/addtag",
                    data:data1,
                    dataType:'json',
                    success:function(result){
                        console.log(result);
                        if(result.code==1){
                            location.reload();
                        }else{
                            alert(result.msg);
                        }
                    }
                });
            }); 

            $(".upload_img").UploadImg({
              url : '/course/fileUpload',
              // width : '320',
              //height : '200',
              quality : '0.8', //压缩率，默认值为0.8
              // 如果quality是1 宽和高都未设定 则上传原图
              mixsize : '10000000',
              //type : 'image/png,image/jpg,image/jpeg,image/pjpeg,image/gif,image/bmp,image/x-png',
              before : function(blob,className){
              //var className = '#'+className;
              //$(className).attr('src',blob);
              },
              error : function(res){
                  $('#img').attr('src','');
                  $('#error').html(res);
              },
              success : function(url,className){
                  console.log(url);
                  $('#banner_url').attr('src', imgUrl + url);
                  $('#input_banner_url').val( url);
              }
          });   

        })
    </script>
@endsection